﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>Light Package Form Demo</title>
<meta name="keywords" content="JavaScript,jQuery,plugin,プラグイン,form,フォーム,LPFORM,light package form" xml:lang="ja" lang="ja" />
<meta name="description" content="Light Package FormはWeb上のフォームを、より簡単に実装するためのjQueryプラグインです。軽快な動作、幅広い環境への対応、開発作業の軽減を目指しています。" xml:lang="ja" lang="ja" />
<meta name="author" content="JSC" xml:lang="ja" lang="ja" />
<meta name="copyright" content="Copyright (C) JSC. All rights reserved." />
<link rel="stylesheet" href="sample-style/lpform.css" type="text/css" media="screen, projection, tv" />
<script language="JavaScript" src="jquery/jquery_min.js" type="text/javascript"></script>
<script language="JavaScript" src="lpform/lpform.js" type="text/javascript"></script>
<script language="JavaScript" src="sample-style/lp_config.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	new $FORM;
});
</script>
</head>
<body id="top">
<div id="header"><h1>Light Package Form Demo</h1></div>

<div id="contents">
	<p class="nav"><a href="http://code.google.com/p/lpform/">TOP</a> >> Demo</p>
    <p class="note">※このフォームはLPFORMのデモ/サンプルなので、内容を入力して送信してもデータは記録されません。</p>
	<form id="lpform" method="get" action="sample-style/true.txt">
	<div id="validerr"></div>
	<div class="fieldset">
		<span id="page1">	
            <ul class="process noconfirm">
                <li class="p1 current">情報入力1</li><li class="p2">情報入力2</li><li class="p3">内容確認</li><li class="p4">登録完了</li>
            </ul>
			<h2 class="noconfirm">お客様の情報を入力してください。</h2>
			<dl>
				<dt><label for="name_l">お名前<span>（必須）</span></label></dt>
				<dd><label for="name_l">姓</label> : <input type="text" id="name_l" name="name_l" class="txt1" /><label for="name_l" class="lpf_label none">お名前(姓)</label>
					<label for="name_f">名</label> : <input type="text" id="name_f" name="name_f" class="txt1" /><label for="name_f" class="lpf_label none">お名前(名)</label></dd>
			</dl>
			<dl>
				<dt><label for="name_l_kana">ふりがな<span>（必須）</span></label></dt>
				<dd><label for="name_l_kana">姓</label> : <input type="text" id="name_l_kana" name="name_l_kana" class="txt1" /><label for="name_l_kana" class="lpf_label none">ふりがな(姓)</label>
					<label for="name_f_kana">名</label> : <input type="text" id="name_f_kana" name="name_f_kana" class="txt1" /><label for="name_f_kana" class="lpf_label none">ふりがな(名)</label></dd>
			</dl>
			<dl>
				<dt><label for="email">Email アドレス<span>（必須）</span></label></dt>
				<dd><input type="text" id="email" name="email" class="txt2" /></dd>
			</dl>
			<dl>
				<dt><label for="postal_code">住所<span>（必須）</span></label></dt>
				<dd><label for="postal_code">〒</label><input name="postal_code" type="text" id="postal_code" maxlength="8" /><label for="postal_code" class="lpf_label none">郵便番号</label><br />
					<input type="text" id="address" name="address" class="txt3" /><label for="address" class="none">住所</label><br /><br />
					<span><label for="building">※アパートやマンションの場合は建物名まで入力してください。</label></span><br />
					<input type="text" id="building" name="building" class="txt3" /></dd>
			</dl>
			<dl>
				<dt><label for="tel_no">電話番号<span>（必須）</span></label></dt>
				<dd><input type="text" id="tel_no" name="tel_no" class="txt1" /></dd>
			</dl>
			<dl>
				<dt><label for="fax_no">FAX番号</label></dt>
				<dd><input type="text" id="tel_no" name="fax_no" class="txt1" /></dd>
			</dl>
			<dl>
				<dt><label for="dm_email">メルマガ購読<span>（必須）</span></label></dt>
				<dd>
					<input type="radio" name="dm_email" id="dm_email" checked="checked" value="希望する" /> <label for="dm_email">希望する</label>　　<input type="radio" name="dm_email" id="dm_email_none" value="希望しない" /> <label for="dm_postal">希望しない</label></dd>
			</dl>
			<div class="buttonarea noconfirm">
				<input type="button" name="next" value="次の画面へ進む" class="goconfirm" />
			</div>
		</span>
	</div>

	<div class="fieldset">
		<span id="page2">
            <ul class="process noconfirm">
                <li class="p1">情報入力1</li><li class="p2 current">情報入力2</li><li class="p3">内容確認</li><li class="p4">登録完了</li>
            </ul>
            <h2 class="noconfirm">ご意見・ご感想をお寄せください。</h2>
            <dl>
                <dt><label for="key">コメント</label></dt>
                <dd><textarea id="key" name="key"></textarea></dd>
            </dl>
			<div class="buttonarea noconfirm">
                <input type="button" name="back" value="前の画面に戻る" class="backpage" />
                <input type="button" name="next" value="確認画面へ進む" id="gosubmit" class="goconfirm" />
			</div>
		</span>
	</div>

	<div class="fieldset">
		<span id="confirmhead">
			<ul class="process">
				<li class="p1">情報入力1</li><li class="p2">情報入力2</li><li class="p3 current">内容確認</li><li class="p4">登録完了</li>
			</ul>
			<h2>入力内容をご確認ください。</h2>
		</span>
		<span id="confirmfoot">
			<div class="buttonarea">
				<input type="button" name="back" value="入力内容を修正する" class="backpage" />
				<input type="button" name="next" value="登録内容を送信する" class="goconfirm" />
			</div>
		</span>
	</div>

	<div class="fieldset">
		<span id="finish">
            <ul class="process">
                <li class="p1">情報入力1</li><li class="p2">情報入力2</li><li class="p3">内容確認</li><li class="p4 current">登録完了</li>
            </ul>
            <h2>登録完了</h2>
            <div id="sample_finish">ご登録ありがとうございます。<br />プレミアム会員登録を受け付けました。</div>
            <div class="buttonarea">
                <input type="button" name="back" value="前の画面に戻る" class="backpage" />
            </div>
        </span>
    </div>
    </form>
</div>
</body>
</html>